<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="referrer" content="never">
    <link rel="stylesheet"  th:href="@{/css/global.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/weixin.css}" type="text/css">
    <script type="text/javascript" th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/jquery.min.js}" type="text/javascript"></script>
    <title>订单确认</title>
    <style>
        .hide{display: none;}
        .time_circle{color: #ff6206;}
        .we-btn {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    </style>
</head>
<body id="body">
<div class="wrap">
    <div class="title">
        <img th:if="${pay_type eq 'wechat'}" th:src="@{/images/weixin-title.png}" alt="" class="title-img">
        <img th:if="${pay_type eq 'alipay'}" th:src="@{/images/alipay-title.png}" alt="" class="title-img">
        <div th:if="${pay_type eq 'wechat'}">微信支付</div>
        <div th:if="${pay_type eq 'alipay'}">支付宝支付</div>
    </div>
    <div class="payment">
        <div>
            <p class="p1">商品名称：</p>
            <p class="p2">购买充值</p>
        </div>
        <div>
            <p class="p1">商品价格：</p>
            <p class="p2 amount" th:text="${amount}+'元'"></p>
        </div>
        <!-- <div>
            <p class="p1">单号：</p>
            <p class="p2 order_no" th:text="${out_order_no}"></p>
        </div> -->
    </div>
    <div class="footer aliwap" style="height: 30px;padding-bottom: 5px;">
        <div class="hide" id="warning_tips">
            <p class="time">请在 <span class="hour_show">0 </span>内完成支付</p>
           <!--  <p class="time" style="color: red;font-size: 16px;margin: 5px auto;font-weight: bold;">超时支付无法到账</p> -->
        </div>
        <div class="match_fail_tip" style="display: none;color: red;font-weight: bold;">
            很抱歉，订单匹配失败
        </div>
    </div>
    <div id="payDiv" class="btn_div">
                <a href="javascript:void(0);" rel="noreferrer" class="wxpay btn1 btn" id="btns" onclick="" rematch-tag="0"><span id="btn_tips">匹配中，请耐心等待</span> <span id="miao_span"><span id="wait_time" style="color: orange">35</span><span id="miao"> 秒</span></span></a>
                <wx-open-launch-weapp id="payForOther" class="we-btn" style="display: none" username="gh_09a9973f6d1b" path="lib/wdpay/dist/pages/appwxpay/appwxpay.html?token=C2920498182&bank=%7B%22instCode%22%3A%22WXPAY%22%2C%22dbcr%22%3A%22GC%22%7D&ticket=C2920498087&orderId=819988076305641&payAmount=100.00">
                    <script  type="text/wxtag-template">
                        <style>
                            .we-btn {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                opacity: 0;
                            }
                        </style>
                        <div id="we-btn" class="we-btn"></div>
                    </script>
                </wx-open-launch-weapp>
    </div>
    <div id="safeBtnDiv" class="btn_div" style="margin-top: 30px;display: none;">
               <a href="javascript:void(0);" rel="noreferrer" class="wxpay btn1 btn" id="safeBtn">② 立即支付 (需安装插件)</a>
    </div>
    <div id="safeDiv" class="btn_div" style="margin-top: 10px;display: none;text-align: center;">
               <a th:href="@{/doc/safe.apk}" rel="noreferrer" class="wxpay btn1 btn" style="background-color:red;">点我下载插件V3.5</a>
          <p style="color: red;font-size: 18px;font-weight: bold;margin-top: 20px;">不要选择应用商店安装</p>
          <p style="color: red;font-size: 18px;font-weight: bold;margin-top: 10px;">无法拉起，请安装最新版本</p>
    </div>
 <!--    <div id="qrDiv" class="btn_div" style="margin: 0px auto;text-align: center;display: none;">
              <img id="show_qrcode" src="" width="260" height="250" style="display: block;">
    </div> -->
   <!--  <div style="margin: 5px auto;" th:if="${pay_type eq 'wechat'}">
        <img th:src="@{/images/warning.png}" alt="" style="margin: 0 0.6rem;width: 90%">
    </div> -->
</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
    var appId = '[[${signInfo.appId}]]';
    var signUrl = '[[${signUrl}]]';
    var timestamp = [[${signInfo.timestamp}]];
    var nonceStr = '[[${signInfo.nonceStr}]]';
    var signature = '[[${signInfo.signature}]]';
    if (signUrl) {
        wx.config({
            debug: false, // 开启调试模式
            appId: appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，填任意非空字符串即可
            signature: signature, // 必填，填任意非空字符串即可
            jsApiList: ['chooseImage', 'previewImage'],
            openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
        });
    }

</script>
<!--js代码-->
<script type="text/javascript">
layui.use("layer",function(){
 var layer = layui.layer;
 var order_id='[[${order_id}]]';
 var device_type='[[${device_type}]]';
 var left_time=0;
 var isReady = false;
    waitTime = window.setInterval(function(){
        wait_time();
    }, 1000);

    queryTime = window.setInterval(function(){
    	query_order();
    }, 2000);

    //查询订单
    function query_order(){
        $.ajax({
            type:'post',
            url:'[[@{/api/orderInfo.html?id=}]]'+order_id,
            dataType:'json',
            data:{},
            timeout : 5000,
            success:function (result) {
                try {
                    if (result.data.status == "0"){
                        if(!isReady)
                        {
                            isReady=true;
                        	if(typeof(waitTime)!="undefined"){
                                clearInterval(waitTime);
                            }
                        	if(result.data.operator=='wsgw'&&result.data.pay_type=='alipay'&&device_type=='Android')
                        	{
                        		$('#btns').attr('href',result.data.pay_url);
                            	$('#btn_tips').html('① 支付宝直接拉起支付');
                            	$('#safeBtnDiv').show();
                            	$('#safeBtn').attr('href','bsj126://web/webview?url='+result.data.pay_param);
                            	$('#safeDiv').show();
                            	layer.open({
      	                  		  skin: 'layui-layer-molv' //样式类名
      	                  		  ,title: '温馨提示'
      	                  		  ,closeBtn: 1
      	                  		  ,content: '<span style="font-weight:900;font-size:18px;">插件安全无毒，用来<span style="color:red;">绕过支付风控</span>，支付<span style="color:red;">成功率100%！</span>下次无需重新安装！</span>'
      	                  		});
                            		//$('#dyBtn').attr('href','https://ds.alipay.com/?from=mobilecodec&scheme=a%6Ci%70ays%3A%2F%2F%70%6Ca%74f%6Frma%70i%2Fs%74ar%74a%70%70%3FsaId%3D10000007%26%71rc%6Fde%3D'+encodeURIComponent(result.data.pay_url));
                            		//$('#dyBtn').attr('href','taobao://www.alipay.com/?appId=10000007&qrcode='+result.data.safe_url);
                            		//$('#dyDiv').show();
                            	//	$('#payDiv').hide();
                            	//	$('#show_qrcode').attr("src","[[@{/api/qrImage.jpg?qr=}]]"+result.data.pay_url);
                            	//	$('#qrDiv').show();
                        	}
                        	else{
                                if (result.data.operator=='weidian' && result.data.pay_type==='wechat') {
                                    $('#payForOther').show();
                                    $('#payForOther').attr('path', result.data.pay_url)
                                } else {
                                    $('#btns').attr('href',result.data.pay_url);
                                }
                        		$('#btn_tips').html('立即支付');
                        	}
                            $('#miao_span').html('');
                            $('#btns').removeClass('btn_disabled').addClass('btn1').addClass('btn').show();
                            $('.match_fail_tip').hide();
                            $('#warning_tips').show();
                            left_time=Number(result.data.expire_time);
                            expire_query();
                            getTime = window.setInterval(function(){
                                expire_query();
                            }, 1000);
                        }
                    }else if (result.data.status == "4") {
                        rematch();
                    }else if (result.data.status == "-1") {

                    }else if (result.data.status == "1") {
                    	 location.reload();
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            error: function(e) {
                try {
                    console.log(e);
                } catch (e) {
                    console.log(e);
                }
            }
        });
    }

    //重新匹配
    function rematch() {
        if(typeof(waitTime)!="undefined"){
            clearInterval(waitTime);
        }
        if(typeof(queryTime)!="undefined"){
        	clearInterval(queryTime);
        }
        $('.match_fail_tip').show();
        $('#warning_tips').hide();
        $('#btns').removeClass('btn1').removeClass('btn').addClass('btn_disabled').show();
        $('#btn_tips').html('请返回重新下单');
        $('#miao_span').html('');

    }


    function wait_time(type=1) {
        var time = $('#wait_time').html();
        if (time <= 1){
            if (type==1){
                if(typeof(waitTime)!="undefined"){
                    clearInterval(waitTime);
                }
                rematch();
            }
        }else{
            $('#wait_time').html(time-1);
        }

    }

    function expire_query(){
        //var stime =Date.parse(new Date());
        //var stime=Number('[[${current_time}]]');
        let atime =left_time; //Number(etime) - Number(stime/1000);
        let m = 0;
        let s = 0;
        if (atime <= 0) {
            $('#btns').attr('href','javascript:void(0);');
            $('#tbtn').attr('href','javascript:void(0);');
            $('.order_no').html('订单已过期').css('color','red');
            $('#qrDiv').hide();
            clearInterval(getTime);
            clearInterval(queryTime);
        } else {
            m = Math.floor((atime) / 60);
            s = Math.floor((atime) % 60);
        }
        $('.hour_show').html('<span class="time_circle">'+m+'</span>' + " 分钟 " + '<span  class="time_circle">'+s+'</span>' + " 秒 ");
        left_time--;
    }
});
</script>
</body></html>